<template>
  <el-dialog title="添加PANEL" :visible.sync="dialogVisible" width="60%">
    <!-- 主面板 -->
    <div>
      <el-form :model="form" label-width="140px">
        <!-- 主面板 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="PANEL总宽度">
              <el-input-number v-model="form.totalWidth" :min="0" style="width:100%"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="PANEL总高度">
              <el-input-number v-model="form.totalHeight" :min="0" style="width:100%"/>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- Q-Panel -->
        <div v-for="(qPanel, qIndex) in form.qpanelInfos" :key="qIndex"
             class="q-wrap">
          <div class="q-tit">
            <span style="font-weight:bold;">Q-Panel {{ qPanel.panelId }}</span>
            <el-button type="danger" @click="removeBigPanel(qIndex)">删除Q-Panel</el-button>
          </div>

          <el-form-item label="Q-Panel ID">
            <el-input v-model="qPanel.panelId" show-word-limit maxlength="1"/>
          </el-form-item>

          <!-- Q-Panel左上角 -->
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="左上角坐标X">
                <el-input-number v-model="qPanel.topLeftX" v-bind="inputNumberAttr"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="左上角坐标Y">
                <el-input-number v-model="qPanel.topLeftY" v-bind="inputNumberAttr"/>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- Q-Panel右下角 -->
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="右下角坐标X">
                <el-input-number v-model="qPanel.bottomRightX" v-bind="inputNumberAttr"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="右下角坐标Y">
                <el-input-number v-model="qPanel.bottomRightY" v-bind="inputNumberAttr"/>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- Panel -->
          <div v-for="(point, pIndex) in qPanel.panelInfos" :key="pIndex" class="p-wrap">
            <div class="p-tit">
              <span style="font-weight:bold;">Panel {{ point.panelId }}</span>
              <el-button type="danger" @click="removeSmallPanel(qIndex, pIndex)">删除Panel</el-button>
            </div>

            <el-form-item label="Panel ID">
              <el-input v-model="point.panelId"/>
            </el-form-item>

            <!-- Panel左上角 -->
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="左上角坐标X">
                  <el-input-number v-model="point.topLeftX" v-bind="inputNumberAttr"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="左上角坐标Y">
                  <el-input-number v-model="point.topLeftY" v-bind="inputNumberAttr"/>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- Panel右下角 -->
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="右下角坐标X">
                  <el-input-number v-model="point.bottomRightX" v-bind="inputNumberAttr"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="右下角坐标Y">
                  <el-input-number v-model="point.bottomRightY" v-bind="inputNumberAttr"/>
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <el-button type="primary" @click="addSmallPanel(qIndex)">+ 添加Panel</el-button>
        </div>


        <el-form-item>
          <el-button type="primary" @click="addBigPanel">+ 添加Q-Panel</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>调试数据</div>
    <!-- 调试数据 -->
    <pre>{{ form }}</pre>
  </el-dialog>
</template>
<script>
export default {
  computed: {
    inputNumberAttr() {
      return {
        // precision: 3,
        style: {
          width: '100%'
        }
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      form: {
        totalWidth: 400,
        totalHeight: 600,
        qpanelInfos: []
      }
    }
  },
  methods: {
    addBigPanel() {
      this.form.qpanelInfos.push({
        panelId: "",
        topLeftX: 0,
        topLeftY: 0,
        bottomRightX: 0,
        bottomRightY: 0,
        panelInfos: []
      })
    },
    removeBigPanel(index) {
      this.form.qpanelInfos.splice(index, 1)
    },
    addSmallPanel(qIndex) {
      this.form.qpanelInfos[qIndex].panelInfos.push({
        panelId: "",
        topLeftX: 0,
        topLeftY: 0,
        bottomRightX: 0,
        bottomRightY: 0
      })
    },
    removeSmallPanel(qIndex, pIndex) {
      this.form.qpanelInfos[qIndex].panelInfos.splice(pIndex, 1)
    },
    show() {
      this.dialogVisible = true
    }
  }
}
</script>
<style scoped lang="stylus">
.q-wrap {
  border: 1px solid #ddd;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 8px;

  .q-tit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }

  .p-wrap {
    border: 1px dashed #aaa;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 6px;

    .p-tit {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }
  }
}
</style>